<!-- * @Description: 搜索表单 -->
<script setup lang="ts">
import { DownOutlined } from '@ant-design/icons-vue';
import { ref, watch } from 'vue';
import type { GeneralSearchFormItem } from '../index';

const props = withDefaults(
  defineProps<{
    /** 表单项的配置 */
    searchItems?: GeneralSearchFormItem[];
    /** 一行展示多少个表单项 */
    formCols?: number;
  }>(),
  {
    searchItems: () => [],
    formCols: 4
  }
);

const emits = defineEmits<{
  /** 搜索事件 */
  (e: 'search', params: any): void;
  /** 重置事件 */
  (e: 'reset', params: any): void;
}>();

/** 表单数据 */
const searchForm = ref<any>({});
/** 是否折叠 */
const collapsed = ref(true);

watch(
  () => props.searchItems,
  () => {
    searchForm.value = {};
    props.searchItems.forEach(item => {
      searchForm.value[item.key] = item.defaultValue;
    });
  },
  {
    immediate: true,
    deep: true
  }
);

// ----------------- Methods -----------------
/** 搜索 */
const handleSearch = () => {
  emits('search', searchForm.value);
};

/** 重置 */
const handleReset = () => {
  props.searchItems.forEach(item => {
    searchForm.value[item.key] = item.defaultValue;
  });
  emits('reset', searchForm.value);
};

/** 切换折叠状态 */
const toggleCollapsed = () => {
  collapsed.value = !collapsed.value;
};

/** 获取表单项宽度 */
const getItemWidth = (item: GeneralSearchFormItem) => {
  if (item.width) {
    return typeof item.width === 'number' ? `${item.width}px` : item.width;
  }
  return '300px';
};
</script>

<template>
  <ACard>
    <ACardHeader>
      <AForm :model="searchForm">
        <div class="flex items-start gap-6">
          <!-- 表单项区域 -->
          <div class="flex-1">
            <ARow :gutter="24">
              <template v-for="(item, index) in searchItems" :key="item.key">
                <ACol v-show="!collapsed || index < formCols" :span="24 / formCols">
                  <AFormItem :label="item.label">
                    <div :style="{ width: getItemWidth(item) }">
                      <AInput
                        v-if="item.type === 'input'"
                        v-model:value="searchForm[item.key]"
                        :placeholder="item.placeholder"
                      />
                      <ASelect
                        v-if="item.type === 'select'"
                        v-model:value="searchForm[item.key]"
                        :placeholder="item.placeholder"
                        :options="item.options"
                      />
                      <ADatePicker
                        v-if="item.type === 'datepicker'"
                        v-model:value="searchForm[item.key]"
                        :placeholder="item.placeholder"
                      />
                      <ARangePicker v-if="item.type === 'rangepicker'" v-model:value="searchForm[item.key]" />
                      <ACascader
                        v-if="item.type === 'cascader'"
                        v-model:value="searchForm[item.key]"
                        :placeholder="item.placeholder"
                      />
                      <ATreeSelect
                        v-if="item.type === 'treeselect'"
                        v-model:value="searchForm[item.key]"
                        :placeholder="item.placeholder"
                      />
                      <AInputNumber
                        v-if="item.type === 'input-number'"
                        v-model:value="searchForm[item.key]"
                        :placeholder="item.placeholder"
                      />
                      <AAutoComplete
                        v-if="item.type === 'autocomplete'"
                        v-model:value="searchForm[item.key]"
                        :placeholder="item.placeholder"
                      />
                    </div>
                  </AFormItem>
                </ACol>
              </template>
            </ARow>
          </div>

          <!-- 按钮区域 -->
          <div class="flex-shrink-0 pt-8">
            <ASpace>
              <AButton type="primary" @click="handleSearch">搜索</AButton>
              <AButton @click="handleReset">重置</AButton>
              <a v-if="searchItems.length > formCols" @click="toggleCollapsed">
                {{ collapsed ? '展开' : '收起' }}
                <DownOutlined class="arrow" :class="[{ 'arrow-up': !collapsed }]" />
              </a>
            </ASpace>
          </div>
        </div>
      </AForm>
    </ACardHeader>
  </ACard>
</template>

<style lang="scss" scoped>
.arrow {
  transition: transform 0.3s;
}

.arrow-up {
  transform: rotate(180deg);
}
</style>
